/**
 * 比例尺：黑白相间 1-1-2-2
 * @param {content2d} ctx canvas上下文
 * @param {object} options 配置项
 */
function setScale_t1(ctx, options) {
  const { offsetX, offsetY } = options
  const dom_scale = document.getElementsByClassName('mapboxgl-ctrl-scale')[0]
  const width = dom_scale.clientWidth * devicePixelRatio - 10 // padding = 10

  // const ctx = offscreen.getContext('2d')
  // 黑白格子的间隔
  const interval_grid = width / 6 // Math.floor(width / 6)
  const interval_grid_floor = Math.floor(interval_grid)
  const interval_grid_ceil = Math.ceil(interval_grid)
  // 比例尺数值
  const innerText = dom_scale.innerText
  const num = getNum(innerText)
  const unit = getUnit(innerText)
  // clear
  // ctx.clearRect(0, 0, dom_canvas.width, dom_canvas.height)
  // draw
  const grid_top = 10 // 格子的top
  const h = 4 // 格子的高度
  let x = offsetX

  ctx.font = '10px serif'

  ctx.fillStyle = '#000'
  ctx.fillRect(-1 + offsetX, grid_top - 1 + offsetY, width + 2, h + 2) // 全黑底色 // 有一个1px的外框

  ctx.fillStyle = '#fff'
  ctx.fillRect(x, grid_top + offsetY, interval_grid_floor, h) & (x += interval_grid_floor)

  ctx.fillStyle = '#000'
  ctx.fillRect(x, grid_top + offsetY, interval_grid_ceil, h) & (x += interval_grid_ceil)
  ctx.fillText((num / 3).toFixed(1), x - 10, offsetY)

  ctx.fillStyle = '#fff'
  ctx.fillRect(x, grid_top + offsetY, interval_grid_floor * 2, h) & (x += interval_grid_floor * 2)
  ctx.fillStyle = '#000'

  ctx.fillRect(x, grid_top + offsetY, interval_grid_ceil * 2, h) & (x += interval_grid_ceil * 2)
  ctx.fillText(Number(num).toFixed(1), width - 12 + offsetX, offsetY)

  ctx.fillText(unit, width + 12 + offsetX, 10 + offsetY)
}

/**
 * 比例尺：线段 8分
 * @param {content2d} ctx canvas上下文
 * @param {object} options 配置项
 */
function setScale_t2(ctx, options) {
  const { offsetX, offsetY } = options
  const dom_scale = document.getElementsByClassName('mapboxgl-ctrl-scale')[0]
  const width = dom_scale.clientWidth * devicePixelRatio - 10 // padding = 10

  // const ctx = offscreen.getContext('2d')
  // 黑白格子的间隔
  const interval_grid = width / 8
  // 比例尺数值
  const innerText = dom_scale.innerText
  const num = getNum(innerText)
  const unit = getUnit(innerText)
  // clear
  // ctx.clearRect(0, 0, dom_canvas.width, dom_canvas.height)
  // draw
  const grid_top = 10 // 格子的top
  let x = offsetX

  ctx.font = '10px serif'

  ctx.strokeStyle = '#000'
  ctx.lineWidth = 1
  // 横线
  ctx.beginPath()
  ctx.moveTo(x, grid_top + offsetY)
  ctx.lineTo(x + width, grid_top + offsetY)
  ctx.stroke()

  for (let i = 0; i < 9; i++) {
    if ((i % 4) === 0) {
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.moveTo(x, grid_top + offsetY - 4)
      ctx.lineTo(x, grid_top + offsetY + 4)
      ctx.stroke()
      ctx.closePath()

      x += interval_grid
    } else {
      ctx.lineWidth = 1
      ctx.beginPath()
      ctx.moveTo(x, grid_top + offsetY - 2)
      ctx.lineTo(x, grid_top + offsetY + 2)
      ctx.stroke()
      ctx.closePath()

      x += interval_grid
    }
  }

  ctx.fillText(num + unit, width - 12 + offsetX, offsetY)
}

/**
 * 比例尺：线段 8分
 * @param {content2d} ctx canvas上下文
 * @param {object} options 配置项
 */
function setScale_t3(ctx, options) {
  const { offsetX, offsetY } = options
  const dom_scale = document.getElementsByClassName('mapboxgl-ctrl-scale')[0]
  const width = dom_scale.clientWidth * devicePixelRatio - 10 // padding = 10

  // const ctx = offscreen.getContext('2d')
  // 黑白格子的间隔
  const interval_grid = width / 8
  // 比例尺数值
  const innerText = dom_scale.innerText
  const num = getNum(innerText)
  const unit = getUnit(innerText)
  // clear
  // ctx.clearRect(0, 0, dom_canvas.width, dom_canvas.height)
  // draw
  const grid_top = 10
  const h = 2
  let x = offsetX

  ctx.font = '10px serif'

  ctx.strokeStyle = '#000'
  ctx.lineWidth = 1
  // 横线
  ctx.beginPath()
  ctx.moveTo(x, grid_top + offsetY)
  ctx.lineTo(x + width, grid_top + offsetY)
  ctx.stroke()

  for (let i = 0; i < 9; i++) {
    if ((i % 4) === 0) {
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.moveTo(x, grid_top + offsetY - 4)
      ctx.lineTo(x, grid_top + offsetY + 1)
      ctx.stroke()
      ctx.closePath()

      x += interval_grid
    } else {
      ctx.lineWidth = 1
      ctx.beginPath()
      ctx.moveTo(x, grid_top + offsetY - 2)
      ctx.lineTo(x, grid_top + offsetY)
      ctx.stroke()
      ctx.closePath()

      x += interval_grid
    }
  }

  ctx.fillText(num + unit, width - 12 + offsetX, offsetY)
}

/**
 * 比例尺：复制mapbox样式
 * @param {content2d} ctx canvas上下文
 * @param {object} options 配置项
 */
function setScale_t4(ctx, options) {
  const { offsetX, offsetY } = options
  const dom_scale = document.getElementsByClassName('mapboxgl-ctrl-scale')[0]
  const width = dom_scale.clientWidth * devicePixelRatio - 10 // padding = 10

  // const ctx = offscreen.getContext('2d')
  // 比例尺数值
  const innerText = dom_scale.innerText
  const num = getNum(innerText)
  const unit = getUnit(innerText)

  // clear
  // ctx.clearRect(0, 0, dom_canvas.width, dom_canvas.height)
  // draw
  const grid_top = 10
  let x = offsetX

  ctx.font = '12px serif'
  ctx.textBaseline = 'top'

  ctx.strokeStyle = '#000'
  ctx.lineWidth = 1
  // 横线
  ctx.beginPath()
  ctx.moveTo(x, grid_top + offsetY - 14)
  ctx.lineTo(x, grid_top + offsetY)
  ctx.lineTo(x + width, grid_top + offsetY)
  ctx.lineTo(x + width, grid_top + offsetY - 14)
  ctx.stroke()

  const text_len = ctx.measureText(num + unit).width
  const offset_x = cacleOffset_in_center(width, 14, text_len, 12)
  ctx.fillText(num + unit, x + offset_x.x, (grid_top + offsetY - 14) + offset_x.y)
}

function getNum(str) {
  // const regx = /^[0-9]*/g
  // return str.match(regx)?.[0] || 0
  const regx = /[0-9]*/g
  return str.match(regx).join('')
}
function getUnit(str) {
  const regx = /[^\d.\,]*/g
  const u = str.match(regx).join('') || 'km'
  if (u === '公里') {
    return 'km'
  } else if (u === '米') {
    return 'm'
  } else {
    return u
  }
}

function cacleOffset_in_center(c_width, c_height, width, height) {
  const x = (c_width - width) / 2
  const y = (c_height - height) / 2

  return {
    x, y
  }
}

/**
 * 设置比例尺
 * @param {content2d} ctx canvas上下文
 * @param {object} options 配置项
 * @param {string} type 类型 t1、t2、t3、t4
 */
function setScale(ctx, options, type = 't4') {
  switch (type) {
    case 't1':
      setScale_t1(ctx, options)
      break
    case 't2':
      setScale_t2(ctx, options)
      break
    case 't3':
      setScale_t3(ctx, options)
      break
    case 't4':
      setScale_t4(ctx, options)
      break
    default:
      break
  }
}
export { setScale }
